<template>
    <div id="canvas" style="width: 100%;height: 100%;" ref="canvas"></div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';

import * as echarts from 'echarts'
import dayjs from "dayjs"
const canvas = ref() // dom实例
let myChart: any = null // echarts实例

onMounted(() => {
    setTimeout(() => {
        renderChart()
    }, 200);

})
const renderChart = () => {
    myChart = echarts.init(canvas.value)
    let result = [
        { name: dayjs().subtract(13, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 475, 当天维修数: 172 },
        { name: dayjs().subtract(12, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 375, 当天维修数: 122 },
        { name: dayjs().subtract(11, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 572, 当天维修数: 362 },
        { name: dayjs().subtract(10, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 270, 当天维修数: 162 },
        { name: dayjs().subtract(9, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 450, 当天维修数: 222 },
        { name: dayjs().subtract(8, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 350, 当天维修数: 122 },
        { name: dayjs().subtract(7, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 650, 当天维修数: 422 },
        { name: dayjs().subtract(6, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 950, 当天维修数: 922 },
        { name: dayjs().subtract(5, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 250, 当天维修数: 122 },
        { name: dayjs().subtract(4, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 450, 当天维修数: 222 },
        { name: dayjs().subtract(3, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 250, 当天维修数: 222 },
        { name: dayjs().subtract(2, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 750, 当天维修数: 422 },
        { name: dayjs().subtract(1, 'day').format('YYYY-MM-DD'), 当天总申请维修数: 640, 当天维修数: 400 },
        { name: dayjs().format('YYYY-MM-DD'), 当天总申请维修数: 440, 当天维修数: 200 },
    ]
    let xData = result.map((item) => {
        return item.name;
    });
    let keys = ["当天总申请维修数", "当天维修数"];
    let seriesData:any[] = [];
    let color = ["59, 240, 144", "255, 157, 141"];
    keys.forEach((key, index) => {
        seriesData.push({
            name: key,
            data: result.map((item) => {
                return item[key];
            }),
            type: "line",
            yAxisIndex: 0,
            symbol: "none",
            symbolSize: 7,
            barWidth: 14,
            splitNumber: 6,
            smooth: true,
            itemStyle: {
                color: `rgba(${color[index]},1)`,
            },
            lineStyle: {
                color: `rgba(${color[index]},1)`,
                width: 1,
            },
            areaStyle: {
                opacity: 1,
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: "linear",
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: `rgba(${color[index]},0.35)`,
                        },
                        {
                            offset: 0.8,
                            color: "rgba(6, 8, 41,0)",
                        },
                    ],
                },
                shadowColor: `rgba(${color[index]},1)`,
                shadowBlur: 10,
            },
        });
    });

    let option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    type: "dotted",
                    color: "rgba(0, 255, 246, 1)",
                    width: 2,
                },
            },
            formatter: function (value) {
                var stl = '<br /> <div style="display:inline-block;width:10px;height:10px;background:#3bf090FC;"></div>&emsp;' + '当天总申请维修数' + ':&emsp;' + value[0].value
                var stlt = '<br /> <div style="display:inline-block;width:10px;height:10px;background:rgb(255, 157, 141);"></div>&emsp;' + '当天维修数' + ':&emsp;' + value[1].value
                return '<div style="background:#fff;padding:15px;color:#999;">' + (value[0].name) + stl + stlt + '</div>'
            },
            backgroundColor: "rgba(255, 255, 255, 0.8)",
            borderColor: "rgba(3, 11, 44, 0.5)",
            textStyle: {
                color: "rgba(43, 46, 48, 1)",
                fontWeight: 600,
            },
        },
        legend: {
            show: true,
            right: 20,
            top: 20,
            icon: "rect",
            formatter: ["占比1", "占比2"],
            textStyle: {
                color: "rgba(255, 255, 255, 1)"
            }
        },
        grid: {
            x: 55,
            y: 35,
            x2: 40,
            y2: 30,
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisPointer: {
                handle: {
                    show: false,
                },
            },
            interval: 0,//使x轴文字显示全
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#009CFF", // 坐标轴线线的颜色
                    width: "1", // 坐标轴线线宽
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#FFFFFF",
                },
            },
            axisTick: {
                show: false,
            },
        },
        dataZoom: [
            //滑动条
            {
                xAxisIndex: 0, //这里是从X轴的0刻度开始
                show: false, //是否显示滑动条，不影响使用
                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 4, // 一次性展示6个。
            },
        ],

        yAxis: [
            {
                type: "value",
                splitLine: {
                    show: false,
                },
                max: 1000,
                min: 0,
                axisLabel: {
                    show: true,
                    formatter: function (value) {
                        return value;
                    },
                    textStyle: {
                        color: "rgba(220, 255, 254, 1)",
                    },
                },
                axisLine: {
                    show: true, // 是否显示y轴
                    lineStyle: {
                        color: "#009CFF", // 坐标轴线线的颜色
                        width: "1", // 坐标轴线线宽
                    },
                },
            },
        ],
        series: seriesData,
    };
    myChart.setOption(option)
    setInterval(() => {
        if (option.dataZoom[0].endValue == xData.length) {
            option.dataZoom[0].endValue = 3;
            option.dataZoom[0].startValue = 0;
        } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
    }, 2000)
}
window.addEventListener("resize", function () {
    myChart?.resize();
});
</script>
  
<style lang="scss" scoped></style>
  